<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>模拟手机消费平台</title>
<link href="<%=path%>/view/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="<%=path%>/view/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var num=document.getElementById(phonenumber).length;
var pwd=document.getElementById(password).length;

</script>

<style>
.title{
	width:100%;
	position:fixed;
	height:auto;
	background-color:#3cc;
	text-align:center;
	font-family:"Times New Roman", Times, serif;
}
#login_form{
	margin-top:80px;
}
.row{
	margin-top:20px;
}
#login_btn{
	margin-top:30px;
}
</style>
</head>
<body>
<div class="title col-sm-12">
	<h3>模拟手机消费平台</h3>
</div>
<form id="login_form" class="col-sm-10 col-sm-offset-1 col-xs-12" role="form">
<div class="info_table" style="text-align:center;height:30px;width:240px;margin-left: auto;
margin-right: auto;">
<p id="isPhone" style="display:none;"><font color="red" size="2px">*&nbsp;手机号不存在，请重新输入</font></p>
<p id="isLogin" style="display:none;"><font color="red" size="2px">*&nbsp;密码错误，请重新输入</font></p>
<p id="phoneIsNull" style="display:none;"><font color="red"  size="2px">*&nbsp;手机号不能为空，请重新输入</font></p>
<p id="passwordIsNull" style="display:none;"><font color="red"  size="2px">*&nbsp;密码不能为空，请重新输入</font></p>
</div>
    <div id="login_t" class="form-group col-sm-6 col-sm-offset-3">
        <div class="row">
            <div class="col-sm-3 col-xs-4 form-label" style="padding-top:5px;">
                <label class="control-label" for="phonenumber">手机号</label>
                <label class="pull-right">:</label>
            </div>
            <div class="col-sm-9 col-xs-8">
                <input id="phonenumber" class="form-control" type="text" placeholder="输入手机号" name="mobile"/>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3 col-xs-4 form-label" style="padding-top:5px;">
                <label class="control-label" for="pwd">密&nbsp;&nbsp;&nbsp;码</label>
                <label class="pull-right">:</label>
            </div>
            <div class="col-sm-9 col-xs-8">
                <input id="password" class="form-control" type="password" placeholder="输入密码" name="password"/>
            </div>
        </div>
		<button id="login_btn" type="button" class="btn btn-primary col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1" onclick="login()">登陆
		</button>
    </div>
</form>

<script type="text/javascript" src="<%=path%>/view/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=path%>/view/js/jquery.js"></script>
<script type="text/javascript" src="<%=path%>/view/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=path%>/view/js/bootstrap.min.js"></script>


<script type="text/javascript">  
    $(document).ready(function(){  
         $("#login_btn").click(function(){  
        	
        	var phone = $.trim($("#phonenumber").val());
        	var password = $.trim($("#password").val());
        	var actionUrl= "<%=path%>/loginController/validateUserLogin.do";
        	 
        	 if(!checkInfo()){
 				return;
 			}
        	
            $.ajax({  
                url:actionUrl,  
                type:"post",  
                data:JSON.stringify({phone:phone,
                	password:password}), 
                
			    dataType : "JSON",
			    cache:false,
			    contentType:"application/json",
                success:function(data){  
                	if(data.flag == true){
                		$("#isLogin").hide();
						$("#isPhone").hide();
						$("#passwordIsNull").hide();
						$("#phoneIsNull").hide();
                		 window.location.href = "<%=path%>/indexController/indexPhone.do";
						
					}else if(data.flag == false){
						if(data.isPhoneFlag == 0){
							$("#isPhone").show();
							$("#isLogin").hide();
							$("#passwordIsNull").hide();
							$("#phoneIsNull").hide();
							return;
						}else if(data.isLoginFlag == 0){
							$("#isLogin").show();
							$("#isPhone").hide();
							$("#passwordIsNull").hide();
							$("#phoneIsNull").hide();
								return;
							}
					} else if(data.NoMoney ==true){
						$("#isLogin").hide();
						$("#isPhone").hide();
						$("#passwordIsNull").hide();
						$("#phoneIsNull").hide();
						window.location.href = "<%=path%>/indexController/indexPhone.do";
                		 alert("话费余额不足10元");
                		
						}else {
						        alert("登录失败！");
						    	window.location.href = "<%=path%>/loginController/loginPhone.do";	
					} 
                }  
            });  
              
             
              
        });    
       });  
    
    
  //基本信息校验
	function checkInfo(){
		var phone = $.trim($("#phonenumber").val());
    	var password = $.trim($("#password").val());
		
		
		if(phone == ""){
			$("#phoneIsNull").show();
			$("#passwordIsNull").hide();
			$("#isLogin").hide();
			$("#isPhone").hide();
			
			$("#phone").focus();
			return false;
		}
		
		
		
		if(password == ""){
			$("#passwordIsNull").show();
			$("#phoneIsNull").hide();
			$("#isLogin").hide();
			$("#isPhone").hide();
			
			$("#password").focus();
			return false;
		}
		
		return true;
		
	}
	
    
</script> 

<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</body>
</html>
